import React from "react";
import './index.css'

interface IFrameProps {
    name: string,
    url: string,
}

const IFrame: React.FC<IFrameProps> = ({name, url}) => {
  // 处理 codepen URL，转换为嵌入格式并启用编辑功能
  const getEmbedUrl = (originalUrl: string) => {
    // 检查是否是 codepen URL
    if (originalUrl.includes('codepen.io')) {
      // 提取 pen ID
      const penMatch = originalUrl.match(/codepen\.io\/[^/]+\/pen\/([^/?]+)/);
      if (penMatch && penMatch[1]) {
        const usernameMatch = originalUrl.match(/codepen\.io\/([^/]+)/);
        const username = usernameMatch ? usernameMatch[1] : 'codepen';
        // 返回嵌入格式的 URL，添加可编辑参数
        // height=400 - 设置高度
        // default-tab=result - 默认显示结果标签页
        // editable=true - 启用编辑功能
        // preview=true - 显示预览
        return `https://codepen.io/${username}/embed/${penMatch[1]}?height=400&default-tab=html%2Cresult&editable=true&preview=true`;
      }
    }
    // 如果不是 codepen URL 或无法解析，返回原始 URL
    return originalUrl;
  };

  // 获取处理后的 URL
  const embedUrl = getEmbedUrl(url);


  return (
    <div className="iframe-container">
      <h3>{name} <a href={url} target="_blank" rel="noopener noreferrer">🔗CodePen</a></h3>
      <iframe
        name={name}
        src={embedUrl}
        title={name}
        allowFullScreen
      />
    </div>
  );
};

export default IFrame;
